<template>
  <div
    class="diy-order"
    :style="[
      `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
    ]"
  >
    <div
      class="diy-order-list"
      :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
      :style="[
        `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
        `background:${
          diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
        }`,
        `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
      ]"
    >
      <template v-for="(item, idx) in diyItem.data" :key="idx">
        <div class="diy-order-item" @click="onLink(item.name)">
          <div class="diy-order-item-block">
            <template v-if="$utils.checkLogin() && orderCount[item.name]">
              <div class="diy-order-item-count">
                {{ orderCount[item.name] }}
              </div>
            </template>
            <image :src="item.icon" mode="widthFit" />
            <div
              class="text"
              :style="{ color: item.style.color }"
              :class="item.style.fw == 1 ? 'fw' : ''"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
  <script lang="ts">
export default {
  name: "storeDiyOrder",
};
</script>
  <script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import { diyOrderDataType } from "@/types";
import { useUser } from "@/store";
import { storeToRefs } from "pinia";

const { orderCount } = storeToRefs(useUser());

console.log(orderCount.value);

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    diyItem: diyOrderDataType;
    index: number | string;
  }>(),
  {
    diyItem: () => {
      return {
        style: {
          bg_status: 1,
          bg: "",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: [],
      };
    },
    index: 0,
  }
);

const onLink = (name: string) => {
  if (name == "refund") {
    $utils.routeRedirectTo("/otherpages/user/order_refund/list");
  } else {
    $utils.routeRedirectTo("/otherpages/user/order/list", { status: name });
  }
};
</script>
  
  <style scoped>
.diy-order-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.diy-order-item {
  width: 20%;
  position: relative;
}
.diy-order-item image {
  width: 56rpx;
  height: 56rpx;
}

.diy-order-item-count {
  top: -6rpx;
  right: 20rpx;
  height: 24rpx;
  line-height: 24rpx;
  min-width: 12rpx;
  border-radius: 24rpx;
  padding: 0 6rpx;
  background: red;
  color: #ffffff;
  position: absolute;
  font-size: var(--base-size-small-xx);
  text-align: center;
  z-index: 2;
}
</style>
  